
<template>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column prop="tu" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.tu" width="50px" height="50px">
        </template>
      </el-table-column>
      <el-table-column
          prop="uid"
          label="车牌号">
      </el-table-column>
      <el-table-column
          prop="pin"
          label="品牌">
      </el-table-column>
      <el-table-column
          prop="time"
          label="购置日期">
      </el-table-column>
      <el-table-column
          prop="price"
          label="购买价格（元）">
      </el-table-column>
      <el-table-column
          prop="status"
          label="当前状态">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="是否报废">
      </el-table-column>
      <el-table-column
          prop="joindate"
          label="报废日期">
      </el-table-column>
      <el-table-column
          prop="yuan"
          label="报废原因">
      </el-table-column>
    </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
  </div>
</template>

<style scoped>

</style>
<script>
export default {
  data(){
    return {
      formLabelWidth: '120px',
      query:{
        page:1,
        size:3,
      },
      tableData:[],
      total:0,
      dialogVisible:false,
    }
  },
  created(){
    this.findPage();
  },
  methods:{
    findPage(){
      this.axios.post("http://localhost:9000/car/findPage",this.query).then(res=>{
        this.tableData=res.data.records;
        this.total=res.data.total;
      })
    },
    handleSizeChange(val) {
      this.query.size = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.findPage();
    },
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
}
</script>